<template>
    <!-- width="1920" height="1080" 可写可不写额 -->
    <v-scale-screen :boxStyle="{ background: '#0f1f23' }" width="8640" height="2160">
        <div class="led-box">
            <div class="led-left">

                <div class="led-left-left">
                    <div class="led-column">
                        <dv-border-box-10 class="bg-color">
                            <div class="led-left-left-row2">
                                <div class="title">外来人口来源地（top10）</div>
                                <div id="container9" style="width:100%;height:330px"></div>
                            </div>
                            <div class="led-left-left-row1">
                                <div class="icon icon-bg1">352人</div>
                                <div class="icon icon-bg2">4906521人</div>
                                <div class="icon icon-bg3">5000989人</div>
                            </div>
                        </dv-border-box-10>
                    </div>
                    <div class="led-left-left-row3">
                        <dv-border-box-10 class="bg-color">
                            <div class="title mab-30">人口漫出分布</div>
                            <div id="container" style="width:100%;height:780px;"></div>
                        </dv-border-box-10>
                    </div>
                </div>


                <div class="led-left-right">
                    <dv-border-box-10 class="bg-color">
                        <div class="led-left-right-left">
                            <div class="left-bottom-left-tow">
                                <div class="led-left-right-left-row1">
                                    <div class="title center">游客出行方式偏好</div>
                                    <div id="container1" style="width:100%;height:350px;"></div>
                                </div>
                                <div class="led-left-right-left-row1">
                                    <div class="title center">游客性别分布</div>
                                    <div id="container2" style="width:100%;height:350px;"></div>
                                </div>
                                <div class="led-left-right-left-row1">
                                    <div class="title center">游客年龄分布</div>
                                    <div id="container3" style="width:100%;height:350px;"></div>
                                </div>
                            </div>
                            <div class="left-bottom-left-tow">
                                <div class="led-left-right-left-row1">
                                    <div class="title center">游客资产等级分布</div>
                                    <div id="container4" style="width:100%;height:350px;"></div>
                                </div>
                                <div class="led-left-right-left-row1">
                                    <div class="title center">旅游行业贡献度</div>
                                    <div id="container5" style="width:100%;height:350px;"></div>
                                </div>
                                <div class="led-left-right-left-row1">
                                    <div class="block">2532897人</div>
                                </div>
                            </div>
                        </div>
                    </dv-border-box-10>
                    <div class="rollTable bg-color">
                        <dv-border-box-10>
                            <div class="title mab-30">行政区域内游客消费额排名</div>
                            <dv-scroll-board :config="rollTable" style="width:100%;height:700px" />
                        </dv-border-box-10>
                    </div>
                </div>
            </div>

            <div class="table-box">
                <div class="table-top">
                    <table>
                        <thead>
                            <tr>
                                <td>区域风险级别</td>
                                <td>发型类型</td>
                                <td>人员目标</td>
                                <td>编辑</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>风险区二级预警</td>
                                <td>手动</td>
                                <td>风险区域人员</td>
                                <td>修改 删除</td>
                                <td>开始发送</td>
                            </tr>
                            <tr>
                                <td>风险区二级预警</td>
                                <td>手动</td>
                                <td>风险区域人员</td>
                                <td>修改 删除</td>
                                <td>开始发送</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>

                    <table class="mat-50">
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td>发送时间</td>
                                <td>内容文案</td>
                                <td style="width: 200px;">积累发送数量</td>
                                <td style="width: 200px;">第一次出发通知时人员总量</td>
                                <td style="width: 200px;">当前滞留人员总量</td>
                                <td>状态</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>2023-03-10 16:35</td>
                                <td>风险区域人员</td>
                                <td>9999</td>
                                <td>8888</td>
                                <td>666</td>
                                <td>已结束</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>2023-03-10 16:35</td>
                                <td>风险区域人员</td>
                                <td>9999</td>
                                <td>8888</td>
                                <td>666</td>
                                <td>已结束</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="table-bottom">
                    <div class="row icon3">1967688人</div>
                    <div class="row2">
                        <dv-border-box-10>
                            <div class="title">区县区域分别接待人次</div>
                            <dv-scroll-board :config="rollTable2" style="width:100%;height:280px" />
                        </dv-border-box-10>
                    </div>
                    <div class="row icon4">
                        4.2天
                    </div>
                    <div class="row2">
                        <dv-border-box-10>
                            <div class="title">过夜人数占比</div>
                            <div id="pie" style="width:100%;height:340px"></div>
                        </dv-border-box-10>
                    </div>
                </div>
            </div>

            <div class="led-center">
                <div class="led-center">
                    <img class="hot-title" src="../assets/dzImage/hot-title.png" alt="">
                </div>
                <div class="title-center">
                    <div class="title-bg">实时在境人口数量：5336790</div>
                    <div class="title-bg">昨日累计人口：5336790</div>
                    <div class="title-bg">辖区内常住人口：5336790</div>
                </div>
                <div class="hot-center">
                    <div class="hot-image">
                        <img class="hot" src="../assets/dzImage/hot.gif" alt="">
                    </div>
                    <div>
                        <dv-border-box-10>
                            <div class="title">外来人口来源地（top10）</div>
                            <div id="container10" style="width:1700px;height:450px;"></div>
                        </dv-border-box-10>
                    </div>
                </div>
            </div>
            <div class="right">
                <dv-border-box-10 class="bg-color" style="height: 450px;">
                    <div class="title">景区实时游客趋势</div>
                    <div id="foldLine" style="width:100%;height:400px;"></div>
                </dv-border-box-10>
                <div class="right-flex" style="margin-top: 30px;">
                    <div class="right-row right-icon">
                        2532897人
                    </div>
                    <div class="right-row">
                        <dv-border-box-10 class="bg-color" style="height: 450px;">
                            <div class="title">景区游客停留时长</div>
                            <div id="column2" style="width:100%;height:350px;"></div>
                        </dv-border-box-10>
                    </div>
                </div>
                <dv-border-box-10 class="bg-color" style="height: 450px;margin-top: 30px;">
                    <div class="title">行政区域消费排名</div>
                    <div id="container11" style="width:100%;height:350px;"></div>
                </dv-border-box-10>
                <dv-border-box-10 class="bg-color" style="height: 450px;margin-top: 30px;">
                    <div class="title">游客来源城市排名(top10)</div>
                    <div id="container12" style="width:100%;height:350px;"></div>
                </dv-border-box-10>
            </div>
        </div>
    </v-scale-screen>
</template>
 
<script>
import Charts from '@jiaminghi/charts'
import json from '@/utils/option.js'
import jsons from '@/utils/dzOption.js'
import * as echarts from "echarts";

export default {
    data() {
        return {
            config: json.config,
            rollTable: jsons.rollTable,
            rollTable2: jsons.rollTable2
        };
    },
    mounted() {
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.$nextTick(() => {

                let container = echarts.init(document.getElementById("container"));
                container.setOption(jsons.pie);

                let container1 = echarts.init(document.getElementById("container1"));
                container1.setOption(jsons.pieOption2);

                let container2 = echarts.init(document.getElementById("container2"));
                container2.setOption(jsons.pieOption);

                let container3 = echarts.init(document.getElementById("container3"));
                container3.setOption(jsons.pieOption3);

                let container4 = echarts.init(document.getElementById("container4"));
                container4.setOption(jsons.pieOption4);

                let container5 = echarts.init(document.getElementById("container5"));
                container5.setOption(jsons.pieOption5);

                const column2 = echarts.init(document.getElementById("column2"));
                column2.setOption(jsons.option);

                let container9 = echarts.init(document.getElementById("container9"));
                container9.setOption(jsons.column);

                let container10 = echarts.init(document.getElementById("container10"));
                container10.setOption(jsons.column);

                let container11 = echarts.init(document.getElementById("container11"));
                container11.setOption(jsons.column3);

                let container12 = echarts.init(document.getElementById("container12"));
                container12.setOption(jsons.column);

                const pie = document.getElementById('pie');
                const pieChart = new Charts(pie);
                pieChart.setOption(jsons.pie2);

                let foldLine = echarts.init(document.getElementById("foldLine"));
                foldLine.setOption(jsons.foldLine);


            })
        }
    },
};
</script>

<style lang="less" scoped>
::v-deep .row-item {
    color: #48EFFF;
    font-size: 42px !important;
}

.bg-color {
    background: #142b4c;
}

.center {
    text-align: center;
}

.title {
    font-size: 40px;
    color: #48EFFF;
    font-weight: bold;
}

.mab-30 {
    margin-bottom: 30px;
}

::v-deep .row-item .index {
    background: transparent !important;
}

/deep/.border-box-content {
    padding: 30px;
    box-sizing: border-box;
}

.mat-50 {
    margin-top: 30px;
}

table {
    width: 100%;
    font-size: 32px;

    thead {
        width: 100%;

        text-align: center;
        color: #fff;

        tr,
        td {
            height: 70px;
            line-height: 70px;
            box-sizing: border-box;
            text-align: center;
            color: #48EFFF;
            background: #101540 !important;
            border-left: 1px solid #4f99ba;
            border-bottom: 1px solid #4f99ba;
        }
    }

    tbody {

        tr,
        td {
            height: 70px;
            line-height: 70px;
            box-sizing: border-box;
            text-align: center;
            color: #48EFFF;
            background: #09223f;
            border-left: 1px solid #4f99ba;
            border-bottom: 1px solid #4f99ba;
        }
    }

}

.led-box::before {
    content: '';
    position: absolute;
    font-family: 'FZCYJ';
    top: 0;
    left: 0;
    background: url('../assets/dzImage/bg.jpg') no-repeat;
    background-size: 8640px 2160px;
    height: 2160px;
    width: 100%;
    text-align: center;
    z-index: -1;
}

.led-box {
    width: 8640px;
    display: flex;
    padding-top: 140px;


    .led-left {
        width: 2880px;
        padding: 50px;
        box-sizing: border-box;

        .led-left-left {
            width: 100%;
            background: url('../assets/dzImage/left-top.png') no-repeat;
            background-size: 100% 100%;
            height: 958px;
            padding: 70px 50px 50px 50px;
            box-sizing: border-box;
            display: flex;

            .led-column {
                width: 1660px;
            }

            .led-left-left-row1 {
                display: flex;
                justify-content: center;
                align-items: center;


                div {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                }

                .icon {
                    display: block;
                    width: 405px;
                    height: 383px;
                    font-size: 60px;
                    color: #48EFFF;
                    font-weight: 900;
                    text-align: center;
                    line-height: 280px;
                }

                .icon-bg1 {
                    background: url('../assets/dzImage/icon1.png') no-repeat;
                    background-size: 100% 100%;
                }


                .icon-bg2 {
                    background: url('../assets/dzImage/icon2.png') no-repeat;
                    background-size: 100% 100%;
                }


                .icon-bg3 {
                    background: url('../assets/dzImage/icon5.png') no-repeat;
                    background-size: 100% 100%;
                }
            }

            .led-left-left-row2 {
                width: 100%;
            }

            .led-left-left-row3 {
                flex: 1;
            }
        }

        .led-left-right {
            width: 100%;
            background: url('../assets/dzImage/left-bottom.png') no-repeat;
            background-size: 100% 100%;
            height: 958px;
            padding: 70px 30px 30px 30px;
            box-sizing: border-box;
            display: flex;
            margin-top: 20px;


            .led-left-right-left {
                width: 2020px;

                .mat-top {
                    margin-top: 30px;
                }
            }

            .left-bottom-left-tow {
                width: 100%;
                display: flex;

                .led-left-right-left-row1 {
                    flex: 1;

                    .block {
                        background: url('../assets/dzImage/block.png') no-repeat;
                        background-size: 100% 100%;
                        width: 100%;
                        height: 380px;
                        font-size: 60px;
                        color: #48EFFF;
                        font-weight: 900;
                        text-align: center;
                        line-height: 280px;
                    }
                }
            }

            .rollTable {
                width: 600px;
                flex-shrink: 0;
                margin-left: 30px;
            }
        }
    }

    .table-box {
        padding: 50px 0;
        box-sizing: border-box;

        .table-top {
            width: 1482px;
            background: url('../assets/dzImage/msg.png') no-repeat;
            background-size: 100% 100%;
            height: 958px;
            padding: 100px 30px 30px 30px;
            box-sizing: border-box;
        }


        .table-bottom {
            width: 1482px;
            background: url('../assets/dzImage/tourism.png') no-repeat;
            background-size: 100% 100%;
            height: 958px;
            padding: 100px 30px 30px 30px;
            box-sizing: border-box;
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;

            .row {
                width: 690px;
                height: 400px;
                font-size: 60px;
                color: #48EFFF;
                font-weight: 900;
                text-align: center;
                line-height: 280px;
            }

            .row2 {
                width: 690px;
                height: 400px;
            }

            .icon3 {
                background: url('../assets/dzImage/icon3.png') no-repeat;
                background-size: 100% 100%;
                height: 400px;
            }

            .icon4 {
                background: url('../assets/dzImage/icon4.png') no-repeat;
                background-size: 100% 100%;
                height: 400px;
            }
        }
    }

    .led-center {
        width: 2880px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .hot-title {
            display: block;
            width: 1225px;
            height: 120px;
        }

        .hot {
            display: block;
            width: 1218px;
            height: 1124px;
        }

        .hot-center {

            .hot-image {
                display: flex;
                justify-content: center;
                text-align: center;
            }

            .icon {
                display: block;
                width: 405px;
                height: 383px;
            }
        }
    }

    .title-center {
        display: flex;

        .title-bg {
            background: url('../assets/dzImage/title-bg.png') no-repeat;
            width: 700px;
            height: 70px;
            background-size: 100% 100%;
            margin: 30px;
            color: #48EFFF;
            line-height: 70px;
            text-align: center;
            font-size: 50px;
        }
    }
}

.right {
    width: 1350px;
    height: 1980px;
    background: url('../assets/dzImage/right.png') no-repeat;
    background-size: 100% 100%;
    padding: 50px 50px 50px 50px;
    box-sizing: border-box;
}

.right-flex {
    display: flex;
    gap: 30px;

    .right-row {
        flex: 1;

    }

    .right-icon {
        display: block;
        width: 100%;
        height: 450px;
        background: url('../assets/dzImage/block.png') no-repeat;
        background-size: 100% 100%;
        font-size: 60px;
        color: #48EFFF;
        font-weight: 900;
        text-align: center;
        line-height: 280px;
    }
}
</style>